<template>
  <div class="cloud-service">
    <!-- search condition -->
    <Row>
      <Col :span="24">
        购买日期
        <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
        至
        <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>

        &nbsp;&nbsp;
        产品型号：
        <Select v-model="tradeType" style="width:100px">
          <Option v-for="item in tradeTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        &nbsp;&nbsp;
        产品名称
        <Input placeholder="" style="width: auto">
        </Input>
        <Button type="primary">查询</Button>
      </Col>

    </Row>
    
    <div class="mt20 clearfix">
      <div class="calc-box theme1">
        <p>销售明细累计：<span class="c1">¥2342424.00</span></p>
        <p>本月销售金额：<span class="c1">¥2342424.00</span></p>
      </div>
      <div class="calc-box theme2">
        <p>保证金余额：<span class="c1">¥2342424.00</span></p>
        <p>保证金支付累计金额：<span class="c1">¥2342424.00</span></p>
      </div>
      <div class="calc-box theme3">
        <p>其他支付累计金额：<span class="c1">¥2342424.00</span></p>
        <p>本月支付金额：<span class="c1">¥2342424.00</span></p>
      </div>
    </div>
    <!-- tables -->
    <div class="mt20">

      <Table stripe :columns="columns1" :data="data1">
        <template slot-scope="{ row, index }" slot="action">
          <Icon type="ios-paper c1" size="20" @click="gotoDetail(row)" />
        </template>
      </Table>

    </div>

    <div class="page mt20">
      <Page :total="100" show-sizer />
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    data() {
      return {
        position: [{
            title: '代理商管理',
            link: '/admin/agent'
          },
          {
            title: '销售管理'
          }
        ],
        tradeType: '1',
        tradeTypes: [{
            label: 'fsdf',
            value: '1'
          },
          {
            label: 'fsdf2',
            value: '2'
          },
        ],
        columns1: [{
            title: '订单号',
            key: 'id'
          },
          {
            title: '产品名称',
            key: 'address'
          },
          {
            title: '产品型号',
            key: 'address'
          },
          {
            title: '类型',
            key: 'address'
          },
          {
            title: '使用单位',
            key: 'address'
          },
          {
            title: '联系人',
            key: 'address'
          },
          {
            title: '联系手机',
            key: 'address'
          },
          {
            title: '支付金额（元',
            key: 'address'
          },
          {
            title: '保证金（元）',
            key: 'address'
          },
          {
            title: '其他支付(元)',
            key: 'address'
          },
          {
            title: '操作',
            slot: 'action',
            width: 60,
            align: 'center'
          },
        ],
        data1: [{
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },

        ]
      }
    },
    methods: {
      gotoDetail(item) {
        this.$router.push(`buyDetail?id=${item.id}`)
      }
    }
  }
</script>

<style lang="less" scoped>
  .calc-box{
    width: 240px;
    float: left;
    line-height: 1.6;
    padding: 30px 0;
    font-size: 12px;
    text-align: center;
    &.theme1{background: #e4f2fd;}
    &.theme2{background: #cce5fc;}
    &.theme3{background: #b2d8f8;}
  }
</style>
